import React from 'react';
import { enquireScreen } from 'enquire-js';
import './styles/index.less';
import Banner from './components/Banner';
import LazyLoad from 'react-lazyload';
import { Row, Col } from "antd";
import { ImageViewer } from 'antd-mobile'

export default class Product extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    isMobile: false,
    visible: false,
  }

  componentDidMount() {
    // 适配手机屏幕;
    enquireScreen((b) => {
      this.setState({ isMobile: !!b });
    });
  }

  goViewPic = () => {
    this.setState({visible: true});
  }

  render() {
    const {visible, isMobile} = this.state;
    const children = [
      <Banner
        key="0"
        isMobile={isMobile}
      />,
      <div key="1" className='product1-wrapper'>
        <p>我们的愿景是“成为全球领先的独立第三方数据湖厂商”；我们的使命是“让每个用户的数字化更简单、更安全、更高效，为全球数字经济和人类美好生活贡献力量”</p>
      </div>,
      <div key="2" className='product2-wrapper'>
        <div className='c-grid-layout'>
          <div className='case-top'>
            <div>
              <span className='case-title'>产品架构</span>
              <div className='case-line'></div>
            </div>
          </div>
          <div className='pic'>
            {isMobile ? 
              <img onClick={this.goViewPic} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/product_h5.png'></img>:
              <img src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/product.png'></img>
            }
          </div>
        </div>
      </div>,
      <LazyLoad key="3">
        <div className='product3-wrapper'>
          <div className='c-grid-layout'>
            <div className='case-top'>
              <div>
                <span className='case-title'>产品功能</span>
                <div className='case-line'></div>
              </div>
            </div>
            <div className='case-list'>
              <div className='list-inner'>
                <Row gutter={isMobile ? [0,20]:[0,0]}>
                  <Col xs={24} md={8} key='product1'>
                    <div className='item product1'>
                      <p className='title'>弹性伸缩</p>
                      <p className='subtitle'>可根据用户的业务需求和预设策略，自动调整计算资源，使云服务器数量自动随业务负载增长而增加，随业务负载降低而减少，保证业务平稳健康运行。</p>
                    </div>
                  </Col>
                  <Col xs={24} md={8} key='product2'>
                    <div className='item product2'>
                      <p className='title'>实时数仓</p>
                      <p className='subtitle'>帮助客户构建秒级实时分析，对业务数据进行实时汇聚和分析，持续挖掘出有价值的信息，帮助企业更快、更准确的进行从生产到经营的全链路决策。</p>
                    </div>
                  </Col>
                  <Col xs={24} md={8} key='product3'>
                    <div className='item product3'>
                      <p className='title'>跨云管理</p>
                      <p className='subtitle'>跨国企业和大型央国企等，业务常涉及多朵云，帮助客户解决多云环境下，统一数据湖管理和合规跨云计算等最核心问题。</p>
                    </div>
                  </Col>
                  <Col xs={24} md={8} key='product4'>
                    <div className='item product4'>
                      <p className='title'>数据集成</p>
                      <p className='subtitle'>快速实现离线及实时数据接入，提供安全、低成本、稳定高效的数据同步平台。</p>
                    </div>
                  </Col>
                  <Col xs={24} md={8} key='product5'>
                    <div className='item product5'>
                      <p className='title'>数据开发</p>
                      <p className='subtitle'>一站式数据协作开发平台，提供客户即席查询、可视化批处理、实时任务在线创建等全链路数据加工能力。</p>
                    </div>
                  </Col>
                  <Col xs={24} md={8} key='product6'>
                    <div className='item product6'>
                      <p className='title'>数据资产</p>
                      <p className='subtitle'>全局统一数据资产门户，帮助客户实现库、表、行、字段粒度的全流程数据权限管理、数据生命周期管理以及数据质量管理。</p>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </LazyLoad>,
      <ImageViewer
        key="4"
        image='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/product_h5.png'
        visible={visible}
        onClose={() => {
          this.setState({visible: false})
        }}
      />
    ];
    return (
      <div
        className="templates-wrapper"
      >
        {children}
      </div>
    );
  }
}
